/* @group Sass Imports */
/* @group CSS Reset */
/* This might be overkill, but we'll prune it later… */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  font: inherit; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none; }

/* remember to define visible focus styles! 
:focus {
	outline: ?????;
} */
/* remember to highlight inserts somehow! */
ins {
  text-decoration: none; }

del {
  text-decoration: line-through; }

/* @end */
/* @group colors */
/* colours used for chart legends */
/* @end */
/* @group mixins */
/* @end */
/* Linked images (for testing purposes only) */
/* Base64 Encoded Images */
/* @end */
/* @group HTML Elements */
body {
  color: #414851;
  background-color: #64717d;
  font-size: .95em;
  font-family: 'Droid Sans', 'Roboto', Helvetica, Arial, sans-serif;
  margin: 0 auto;
  padding: 0; }

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  line-height: normal; }

h1 {
  font-size: 1.6em;
  margin-bottom: .5em;
  margin-top: .5em; }

h2 {
  font-size: 1.2em;
  margin-bottom: .7em;
  margin-top: .5em;
  padding-bottom: .2em;
  border-bottom: 0.2em solid #414851; }

h3 {
  font-size: 1em;
  margin: 1em 0 .3em 0;
  padding: .25em 0;
  border-bottom: 0.1em solid #ff9900;
  color: #ff9900; }

h4 {
  font-size: 1em;
  color: #414851;
  margin-bottom: .4em;
  margin-top: .3em;
  padding-bottom: .2em;
  border-bottom: 0.2em solid #414851;
  color: #7c8796; }

h5 {
  font-size: 1em;
  color: #414851;
  margin-bottom: .3em;
  margin-top: .3em; }

h6 {
  font-size: 1em;
  color: #414851;
  margin-bottom: .3em;
  margin-top: .3em; }

a {
  color: #ff9900;
  display: block;
  text-decoration: none; }

strong {
  font-weight: bold; }

img {
  height: auto;
  max-width: 100%; }

p {
  margin: 0;
  padding: 0; }

input, select, textarea {
  font-size: 1.3em; }

select {
  margin-bottom: .5em; }

label {
  display: block;
  margin-top: 1em; }

button {
  font-size: 1.5em; }

/* @end */
/* @group Header & Footer */
body > header {
  height: 3em;
  background: #64717d; }
  body > header h1 {
    margin: 0;
    display: inline-block;
    font-size: 1.25em;
    font-weight: 100;
    margin-left: .5em;
    padding: .5em 0 .5em 2em;
    float: left;
    background-image: url();
    background-position: center left;
    background-repeat: no-repeat; }
  body > header a {
    color: white; }
  body > header ul {
    float: right;
    display: table;
    table-layout: fixed; }
    body > header ul li {
      display: table-cell; }
    body > header ul a {
      margin-top: .7em;
      padding: .25em .7em; }

body > footer {
  padding: 1em;
  background: #64717d;
  border-top: 4px solid #4d5761; }
  body > footer p {
    color: white;
    padding: .5em 0;
    margin: 0;
    font-size: 0.85em; }
    body > footer p.switch {
      border: 1px solid #7d8b97;
      padding: 0.6em;
      margin: 0 0 2em 0;
      text-align: center; }
      body > footer p.switch a {
        color: white;
        font-size: 1.1em;
        display: inline;
        padding-left: 2em;
        margin: 0 auto;
        background-image: url();
        background-position: center left;
        background-repeat: no-repeat; }
    body > footer p.switch.mobile a {
      background-image: url(); }

/* @end */
/* @group content region #id and .view styles */
#content, #extended {
  background: white; }

#extended {
  display: none; }

.view {
  padding: .7em;
  background: white; }

/* @end */
/* @group .title and .breadcrumbs styles */
.title, .breadcrumbs {
  background-color: #7d8b97; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; } 

  .title li, .breadcrumbs li {
    color: white;
    padding: 0.75em;
    display: inline-block;
    vertical-align: top;
    border: none; }
  .title li:first-child, .breadcrumbs li:first-child {
    padding-left: 0.75em;
    padding-right: 1.25em;
    background-image: url();
    background-position: center right;
    background-repeat: no-repeat; }
  .title a, .breadcrumbs a {
    color: white; }
  .title span, .breadcrumbs span {
    display: none; }

.title a {
  width: 20px;
  height: 20px;
  margin-top: -0.2em;
  background-image: url();
  background-position: center left;
  background-repeat: no-repeat; }

.breadcrumbs {
  background-color: #99a4ae; }

/* @end */
/* @group .tabs styles */
.tabs {
  width: 100%;
  display: table;
  table-layout: fixed;
  background-color: #414851; }
  .tabs li {
    display: table-cell;
    border-right: 1px solid #64717d; }
  .tabs a {
    font-size: 1em;
    text-align: center;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.75em 0;
    color: white; }
  .tabs .selected {
    color: #64717d;
    background-color: white; }
  .tabs.vehicle-details li:last-child, .tabs.vehicles-all li:first-child {
    width: 40%;
    border: none; }

/* @end */
/* @group .stats styles */
.stats {
  position: relative;
  height: 5.5em;
  display: block;
  margin: 1.5em 0; }
  .stats dt, .stats dd {
    padding: 0;
    margin: 0; }
  .stats .mpg, .stats .mpg-label, .stats .mile, .stats .mile-label, .stats .month, .stats .month-label {
    position: absolute; }
  .stats .mile, .stats .month {
    font-weight: bolder;
    font-size: 1.6em; }
  .stats .mpg {
    font-weight: bold;
    font-size: 7em; }
  .stats .mpg {
    top: -0.2em;
    left: 0em; }
  .stats .mpg-label {
    top: 0em;
    left: 8em; }
  .stats .mile {
    top: -0.2em;
    right: 0.7em; }
  .stats .mile-label {
    top: 1.4em;
    right: 1em; }
  .stats .month {
    top: 1.8em;
    right: 0.7em; }
  .stats .month-label {
    top: 4.6em;
    right: 1em; }

/* @end */
/* @group .pagination styles */
.flash {
  margin: 1em;
  border: 1px solid #64717d; }
  .flash p {
    margin: 0 0 0 .5em;
    padding: .7em .5em .5em 2em;
    background-repeat: no-repeat;
    background-position: center left; }
  .flash.alert {
    background-color: #fff5f3;
    border-color: #d72e02; }
    .flash.alert p {
      color: #d72e02;
      background-image: url(); }
  .flash.notify {
    background-color: #fff7eb;
    border-color: #ff9900; }
    .flash.notify p {
      color: #ff9900;
      background-image: url(); }
  .flash.confirm {
    background-color: #eef8e2;
    border-color: #649a23; }
    .flash.confirm p {
      color: #649a23;
      background-image: url(); }

/* @end */
/* @group .widget styles */
.widget {
  margin: 0 -0.7em 1em -0.7em;
  background-color: #edeff1;
  border-top: 1px solid #c4cad0;
  border-bottom: 2px solid #c4cad0; }
  .widget.vehicle .button-group {
    width: 97%;
    margin: 0 auto;
    padding: .25em 0; }
    .widget.vehicle .button-group li {
      margin: 0;
      padding: 0;
      border-left: 1px solid white; }
      .widget.vehicle .button-group li:first-child {
        border: none; }
      .widget.vehicle .button-group li:last-child {
        width: 40%; }
    .widget.vehicle .button-group a {
      background-color: #414851; }
    .widget.vehicle .button-group a.flag {
      background-image: url();
      background-position: top right;
      background-repeat: no-repeat; }
  .widget.fillup, .widget.reminder {
    margin-bottom: 0;
    border-bottom: none; }
    .widget.fillup dt, .widget.reminder dt {
      border-bottom: 1px solid #c4cad0; }
    .widget.fillup tr td a, .widget.reminder tr td a {
      display: block;
      width: 100%;
      color: #64717d;
      line-height: 1.75em; }
  .widget.fillup tr td:first-child {
    width: 20%; }
  .widget.fillup tr td:last-child {
    width: 30%; }
  .widget.reminder tr td {
    width: 50%; }
  .widget h2 {
    margin: 0;
    padding: 0.5em;
    border: none; }
    .widget h2 a {
      color: #64717d; }
  .widget table {
    width: 100%;
    background: white;
    border-top: 1px solid #c4cad0;
    border-bottom: 1px solid #c4cad0; }
  .widget th {
    text-align: left;
    font-size: 0.9em;
    font-weight: bold;
    color: white;
    background-color: #7c8796; }
  .widget td, .widget th {
    padding: .5em;
    border-left: 1px solid #c4cad0; }
    .widget td:first-child, .widget th:first-child {
      border-left: none; }
  .widget tr:nth-child(even), .widget .even {
    background-color: #e9f7ff; }

@media (min-width: 320px) {
  .widget.fillup tr td:last-child, .widget.reminder tr td:last-child {
    padding-right: 1.75em;
    background-image: url();
    background-repeat: no-repeat;
    background-position: center right; } }
/* @end */
/* @group .pagination styles */
.pagination {
  margin: 0.5em 0 1em 0; }
  .pagination ol {
    display: table;
    table-layout: fixed;
    text-align: center; }
    .pagination ol li {
      display: table-cell; }
      .pagination ol li:first-child a {
        margin-left: -0.5em; }
      .pagination ol li a {
        color: #64717d;
        display: block;
        margin: 0 0.5em;
        padding: 0 0.5em; }

/* @end */
/* @group .hbox and .vbox styles */
.hbox {
  display: table;
  table-layout: fixed; }
  .hbox.fluid {
    table-layout: auto; }
  .hbox li {
    display: table-cell;
    padding: 0 .25em;
    margin: 0; }

.vbox li {
  display: block;
  margin: .5em .25em; }

/* @end */
/* @group .button-group styles */
.button-group {
  margin: 0;
  padding: 1em 0;
  width: 100%; }
  .button-group li.button {
    display: block;
    padding: .8em 0; }
  .button-group a, .button-group button, .button-group .button {
    width: 100%;
    border: none;
    display: block;
    margin: 0 auto;
    padding: .8em 0;
    overflow: hidden;
    color: #e0e3e6;
    font-size: .9em;
    font-family: sans-serif;
    white-space: nowrap;
    background-color: #414851;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis; }
    .button-group a span, .button-group button span, .button-group .button span {
      margin: 0 auto;
      padding: 0.75em 0; }
  .button-group a:hover, .button-group button:hover, .button-group .button:hover {
    color: white;
    background: #1f2227;
    cursor: pointer; }
  .button-group .disabled a, .button-group button[disabled], .button-group .disabled.button {
    cursor: default;
    color: #b6bdc4;
    background-color: #eef0f2; }
    .button-group .disabled a:hover, .button-group button[disabled]:hover, .button-group .disabled.button:hover {
      cursor: default;
      color: #b6bdc4;
      background-color: #eef0f2; }
  .button-group .invert a, .button-group .invert button, .button-group .invert.button {
    background: white; }
    .button-group .invert a span, .button-group .invert button span, .button-group .invert.button span {
      color: #414851; }
  .button-group .invert a:hover, .button-group .invert button:hover, .button-group .invert.button:hover {
    cursor: pointer;
    background: #eef0f2; }
  .button-group .invert.disabled a, .button-group .invert button[disabled], .button-group .invert.disabled.button {
    cursor: default;
    background: white; }
    .button-group .invert.disabled a:hover, .button-group .invert button[disabled]:hover, .button-group .invert.disabled.button:hover {
      cursor: default;
      background: white; }
    .button-group .invert.disabled a:hover span, .button-group .invert.disabled a span, .button-group .invert button[disabled]:hover span, .button-group .invert button[disabled] span, .button-group .invert.disabled.button:hover span, .button-group .invert.disabled.button span {
      color: #b6bdc4; }
  .button-group .icon span {
    padding-right: 2.25em;
    background-repeat: no-repeat;
    background-position: center right; }
  .button-group .icon.left span {
    padding-left: 2.25em;
    background-position: center left; }
  .button-group .false span {
    background-image: url(); }
  .button-group .false.invert span {
    background-image: url(); }
  .button-group .false.disabled span {
    background-image: url(); }
  .button-group .add span {
    background-image: url(); }
  .button-group .add.invert span {
    background-image: url(); }
  .button-group .add.disabled span {
    background-image: url(); }
  .button-group .back span {
    background-image: url(); }
  .button-group .back.invert span {
    background-image: url(); }
  .button-group .back.disabled span {
    background-image: url(); }
  .button-group .next span {
    background-image: url(); }
  .button-group .next.invert span {
    background-image: url(); }
  .button-group .next.disabled span {
    background-image: url(); }
  .button-group .refresh span {
    background-image: url(); }
  .button-group .refresh.invert span {
    background-image: url(); }
  .button-group .refresh.disabled span {
    background-image: url(); }

/* @end */
/* @group .list styles */
.list {
  list-style: none; }
  .list li {
    padding: .75em 0;
    border-bottom: 1px solid #d2d7db; }
    .list li:last-child {
      border-bottom: none; }
  .list dt {
    font-weight: bold;
    padding: .5em 0 0 0; }
    .list dt em {
      font-size: 0.85em;
      font-style: italic;
      font-weight: normal; }
  .list dd {
    padding: .25em 0 .75em 0;
    border-bottom: 1px solid #d2d7db; }
    .list dd:last-child {
      border-bottom: none; }
  .list.delete.delete dd {
    color: #d72e02; }

/* @end */
/* @group <form> styles */
form .validation-summary-errors {
  color: #ff9900;
  font-style: italic; }
form ol.buttons li {
  background: none; }
form li {
  list-style: none;
  margin: 0.25em 0;
  padding: .25em 0; }
  form li.validation-error {
    margin: 0.25em -0.5em;
    padding: 0.5em;
    border: 1px solid #ff9900;
    background-image: url();
    background-position: top right;
    background-repeat: no-repeat; }
    form li.validation-error label, form li.validation-error span {
      color: #ff9900; }
form label {
  vertical-align: baseline;
  margin: 0;
  font-weight: bold; }
  form label em {
    font-size: 0.85em;
    font-style: italic;
    font-weight: normal; }
form input:not([type=radio]), form input:not([type=submit]):focus, form textarea:focus {
  background: white; }
form select, form input[type=text], form input[type=number], form textarea {
  display: block;
  max-width: 100%;
  margin: 0.2em 0;
  padding: 0.1em 0;
  text-indent: 0.25em;
  text-overflow: ellipsis;
  width: 98%;
  outline: none;
  word-wrap: break-word;
  word-wrap: break-all;
  ms-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box; }
form input[type=text], form input[type=number], form textarea {
  border: solid 1px #c4cad0; }
form input[type=checkbox] {
  margin-left: 0; }
form select {
  max-width: 82.5%; }
form h4 {
  text-transform: uppercase;
  border: none; }
form .field-validation-valid, form .field-validation-error {
  display: table-row; }
form .psuedo-date {
  width: 100%;
  display: table;
  table-layout: fixed; }
  form .psuedo-date label {
    display: table-row;
    width: 100%; }
  form .psuedo-date select {
    display: table-cell;
    vertical-align: middle;
    width: 27.5%; }
    form .psuedo-date select:nth-child(4) {
      width: 17.5%;
      margin: 0 2%; }
form .range label {
  width: 15%;
  display: block;
  padding: 0.1em .5em 0 0;
  float: left; }
form .range select {
  display: block;
  width: 60%; }

/* @end */
/* @group utilities */
.hidden {
  display: none !important; }

.flag {
  background-image: url();
  background-position: top right;
  background-repeat: no-repeat; }

em {
  font-size: .85em;
  font-weight: normal;
  font-style: italic; }

.legend :nth-child(1) {
  color: #4bb2c5; }
.legend :nth-child(2) {
  color: #c5b47f; }
.legend :nth-child(3) {
  color: #eaa228; }
.legend :nth-child(4) {
  color: #579575; }
.legend :nth-child(5) {
  color: #839557; }
.legend :nth-child(6) {
  color: #958c12; }
.legend :nth-child(7) {
  color: #953579; }
.legend :nth-child(8) {
  color: #4b5de4; }
.legend :nth-child(9) {
  color: #d8b83f; }
.legend :nth-child(10) {
  color: #ff5800; }

/* @end */
